<template>
  <div class="comment-reply">
    <!-- 导航栏 -->
    <van-nav-bar
      :title="
        commentItem.reply_count
          ? `${commentItem.reply_count}条回复`
          : '暂无回复'
      "
    >
      <van-icon slot="left" name="cross" @click="$emit('click-close')" />
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 当前评论项 -->
    <CommentItem :item="commentItem" :isInCommentReply="false"></CommentItem>
    <!-- /当前评论项 -->
    <van-cell title="当前评论" />
    <!-- 评论的回复列表 -->
    <CommentList
      type="c"
      :articleIdOrCommentId="commentItem.com_id"
      ref="CommentList"
    />
    <!-- /评论的回复列表 -->
    <van-button class="comment-btn" type="default" @click="isPostShow = true"
      >评论</van-button
    >
    <!-- 底部弹出层 -->
    <van-popup v-model="isPostShow" position="bottom" style="height: 20%">
      <CommentPost
        :artID="commentItem.com_id"
        :isCommentReply="true"
        :articleID="articleID"
        @pubComment="pubComment"
      />
    </van-popup>
    <!-- /底部弹出层 -->
  </div>
</template>

<script>
import CommentItem from './CommentItem.vue'
import CommentList from './CommentList.vue'
import CommentPost from './CommentPost.vue'
export default {
  name: 'CommentReply',
  data() {
    return {
      isPostShow: false
    }
  },
  created() {},
  updated() {
    // console.log(this.commentItem)
  },
  props: {
    commentItem: {
      type: Object,
      required: true
    },
    articleID: {
      type: [String, Number, Object],
      required: true
    }
  },
  methods: {
    pubComment(newComment) {
      this.$refs.CommentList.list.unshift(newComment)
      this.isPostShow = false
      this.commentItem.reply_count++
    }
  },
  computed: {},
  watch: {},
  components: { CommentItem, CommentList, CommentPost }
}
</script>

<style lang="less" scoped>
.comment-btn {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
}
</style>
